<template>
    <div class="detail">
        <div class="detail-line">
            <Steps :step-data="stepData" :active="stepActive" />
        </div>
        <div v-show="stepActive === 0" class="detail-step1">
            <form-layout
                :form="basic_form"
                :config="basic_config"
            >
                <template slot="tips-info" slot-scope="scope">
                    <div class="detail-tips">
                        <div class="detail-tips-li" v-for="ele in basic_form['tipsList']">
                            <i class="detail-icon el-icon-warning"></i>
                            <div>警告：</div>
                            <div class="detail-title">任务单{{ele['code']}}，视频{{ele['status']}}</div>
                        </div>
                    </div>
                </template>
                <template slot="footer" slot-scope="scope">
                    <div class="detail-footer">
                        <el-button type="primary" @click.native.prevent="nextStep(scope)">二维码生成</el-button>
                    </div>
                </template>
            </form-layout>
        </div>
        <div v-show="stepActive === 1" class="detail-step1">
            <form-layout
                :form="base64_form"
                :config="base64_config"
            >
                <template slot="picture" slot-scope="scope">
                    <div class="detail-picture" ref="qrCodePicture"></div>
                </template>
                <template slot="footer" slot-scope="scope">
                    <div class="detail-footer">
                        <el-button type="primary" :loading="loading" @click.native.prevent="onSubmit(scope)">完成</el-button>
                    </div>
                </template>
            </form-layout>
        </div>
    </div>
</template>

<script>
// 组件
import Steps from './step'
// 二维码生成器
import QRCode from 'qrcodejs2'
// 二维码上传
import { Report_Qrcode_Upload, Report_Qrcode_QueryById } from '@/server/videoQrcodeManage'

export default {
    components: {
        Steps
    },
    props: {
        data: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        data(row) {
            this.basic_form = Object.assign({}, {...row}, {tipsList:[]})
            // 先查询任务单是否有未上传视频
            if( row['reportId'] ) {
                Report_Qrcode_QueryById(row['reportId']).then(res => {
                    let info = res['data']
                    // 测试模拟
                    // this.basic_form['tipsList'] = [{
                    //     code: 'gl-343434',
                    //     status: '未上传'
                    // },{
                    //     code: 'gl-343434',
                    //     status: '未上传'
                    // },{
                    //     code: 'gl-343434',
                    //     status: '未上传'
                    // },{
                    //     code: 'gl-343434',
                    //     status: '未上传'
                    // }]
                })
            }
        }
    },
    data() {
        return {
            loading: false,
            // 当前激活的步骤
            stepActive: 0,
            // 步骤信息
            stepData: [{
                step: 1,
                title: '确认必填信息'
            }, {
                step: 2,
                title: '生成二维码'
            }],
            // 第一步
            basic_form: {
            },
            basic_config: {
                fieldsConfig: [{
                    cols: 12,
                    name: 'reportCode',
                    label: '报告编号：',
                    size: 'medium',
                    disabled: true,
                    fieldType: 'text',
                    placeholder: '请输入服务名称'
                }, {
                    cols: 12,
                    name: '任务单编号',
                    label: '任务单编号：',
                    size: 'medium',
                    disabled: true,
                    fieldType: 'text',
                    placeholder: '请输入服务地址'
                }, {
                    cols: 12,
                    name: 'sampleStatus',
                    label: '样品状态：',
                    size: 'medium',
                    disabled: true,
                    fieldType: 'text',
                    placeholder: '请输入大小所属图层'
                }, {
                    cols: 12,
                    name: 'variety',
                    label: '品种：',
                    size: 'medium',
                    disabled: true,
                    fieldType: 'text',
                    placeholder: '请输入大小所属图层'
                }, {
                    cols: 12,
                    name: 'entrustCode',
                    label: '委托编号：',
                    size: 'medium',
                    disabled: true,
                    fieldType: 'text',
                    placeholder: '请输入大小所属图层'
                }, {
                    cols: 12,
                    name: 'entrustUnit',
                    label: '委托单位：',
                    size: 'medium',
                    disabled: true,
                    fieldType: 'text',
                    placeholder: '请输入大小所属图层'
                }, {
                    cols: 12,
                    name: 'entrustUser',
                    label: '委托人：',
                    size: 'medium',
                    disabled: true,
                    fieldType: 'text',
                    placeholder: '请输入大小所属图层'
                }, {
                    cols: 12,
                    name: 'entrustDate',
                    label: '委托日期：',
                    size: 'medium',
                    disabled: true,
                    fieldType: 'text',
                    placeholder: '请输入'
                }, {
                    cols: 12,
                    name: 'detectionDate',
                    label: '检测日期：',
                    size: 'medium',
                    disabled: true,
                    fieldType: 'text',
                    placeholder: '请输入'
                }, {
                    cols: 12,
                    name: 'reportFilePath',
                    label: '报告附件：',
                    size: 'medium',
                    disabled: true,
                    fieldType: 'text',
                    placeholder: '请输入'
                }, {
                    cols: 24,
                    size: 'medium',
                    slot: 'tips-info'
                }, {
                    cols: 24,
                    size: 'medium',
                    slot: 'footer'
                }]
            },
            // 第二步
            base64_form: {
                qrcode: ''
            },
            base64_config: {
                fieldsConfig: [{
                    cols: 24,
                    label: '图列：',
                    size: 'medium',
                    slot: 'picture'
                }, {
                    cols: 24,
                    size: 'medium',
                    slot: 'footer'
                }]
            }
        }
    },
    methods: {
        // 下一步
        nextStep(scope) {
            if (scope && scope.sf()) {
                // 下一步
                this.stepActive++
                // 生成二维码
                let qrcode = new QRCode(this.$refs.qrCodePicture, {
                    // text 需要转二维码的内容 可以是文本也可以是一个链接 是链接会直接跳走
                    text: "http://www.baidu.com",
                    width: 100,
                    height: 100,
                    colorDark: "#000", //二维码颜色
                    colorLight: "#fff", //二维码背景颜色
                    correctLevel: QRCode.CorrectLevel.H, //容错率,L/M/H
                })
                // 存储对象
                this.base64_form['qrcode'] = qrcode
            }
        },
        // 提交二维码图片
        onSubmit(scope) {
            if (scope.sf()) {
                this.loading = true
                // 组装formdata
                this.$nextTick(async() => {
                    let formData = new FormData()
                    // 添加二维码图片
                    let base64 =  this.base64_form['qrcode']['_oDrawing']['_elImage']['currentSrc']
                    formData.append('file', base64)
                    // 页面需要修改数据
                    let params = Object.assign({},{...this.basic_form},{codeStatus: 2}) 
                    // 调用上传接口
                    const res = await Report_Qrcode_Upload(formData, params)
                    if (res.code === 200 ) {
                        this.loading = false
                        this.$currentDialog.close()
                    }
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.detail {
    padding-left: 40px;
    padding-right: 40px;
    &-step1 {
        margin-top: 30px;
        margin-right: 52px;
    }
    &-tips-li {
        float: left;
        display: flex;
        align-items: center;
        color: #e6a23c;
        font-size: 16px;
    }
    &-title {
        margin-left: 8px;
        margin-right: 8px;
    }
    &-icon {
        font-size: 26px;
        margin-left: 4px;
        margin-right: 4px;
    }
    &-footer {
        float: right;
    }
    &-picture {
        display: inline-block;
    }
    ::v-deep .detail-select {
        width: 100%;
    }
}
</style>
